<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true">
      <el-form-item label=" 名称">
        <el-input
          v-model="searchForm.name"
          placeholder=" 名称"
          clearable
          @blur="fetchList"
          @keyup.enter.native="fetchList"
        />
      </el-form-item>
      <search-buttons
        :fetch-data="fetchList"
        :export-flag="false"
        :add-fun="addRegion"
      />
    </el-form>
    <!--表格-->
    <el-table
      :data="tableData"
      border
      stripe
      row-key="id"
      lazy
      :load="load"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="name" label=" 名称" />
      <el-table-column prop="level" label=" 等级">
        <template slot-scope="scope">
          <span v-if="scope.row.level == '0'">省 / 直辖市</span>
          <span v-else-if="scope.row.level == '1'">市</span>
          <span v-else-if="scope.row.level == '2'">区 / 县</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="adCode" label="区域编码" />
      <el-table-column prop="cityCode" label="城市编码" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <operation-buttons
            :row="scope.row"
            :del-fun="delSysProvinceRegionsById"
            :detail-fun="regionDetail"
            :edit-fun="editRegion"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import sysProvinceRegions from '@/api/provinceRegions'
import OperationButtons from '@/components/OperationButtons/index'
import SearchButtons from '@/components/SearchButtons/index'
import { popDialog } from '@/utils/popDialog'
export default {
  components: {
    OperationButtons,
    SearchButtons
  },
  data() {
    return {
      name: 'SysProvinceRegions',
      searchForm: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      tableData: []
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    load(tree, treeNode, resolve) {
      sysProvinceRegions.getByParentId({ parentId: tree.id, name: this.searchForm.name }).then(res => {
        resolve(res.data)
      })
    },
    fetchList() {
      sysProvinceRegions.getByParentId({ name: this.searchForm.name }).then(resp => {
        this.tableData = resp.data
      })
    },
    delSysProvinceRegionsById(id) {
      sysProvinceRegions.delById(id).then(resp => {
        this.$message.info(resp.message)
      })
    },
    clearSearchForm() {
      this.searchForm = {}
    },
    downloadTemplate() {
      window.location.href = 'http://localhost:9527/sysProvinceRegions/template'
    },
    export2Excel() {
      sysProvinceRegions.export2Excel({ ...this.searchForm })
    },
    addRegion() {
      this.popFormDialog(0, null)
    },
    editRegion(id) {
      this.popFormDialog(1, id)
    },
    regionDetail(id) {
      this.popFormDialog(2, id)
    },
    popFormDialog(type, id) {
      popDialog('views/provinceRegions/form', '400px', '300px', this.fetchList, { type, id })
    }
  }
}
</script>
<style>

</style>
